<template>
  <div class="main-container">
    <div class="goods-date">
      <span>
        <div class="date">06. 22</div>
        <div class="total">共1件宝贝</div>
      </span>
      <s class="line"></s>
    </div>
    <div class="item-box">
      <img src="https://yanxuan-item.nosdn.127.net/ae521f6d97560598f3e6b3ddaed477c0.png" alt="">
      <div style="padding: 10px">
        <div class="price">￥169.0</div>
        <div class="name">Nike耐克官方DRI-FIT运动帽</div>
      </div>
    </div>
  </div>
</template>
<script setup>

</script>
<style scoped lang="less">
.main-container {
  position: relative;
  height: 100%;
  background-color: #fff;
  padding: 20px;
  .goods-date {
    // width: 180px;
    width: 100%;
    height: 45px;
    position: relative;
    span {
      width: 180px;
      height: 100%;
      display: flex;
      justify-content: space-around;
    }
    .date {
      font-size: 30px;
      font-weight: bold;
    }
    .total {
      font-size: 12px;
      color: #ccc;
      padding-top: 18px;
    }
    s {
      text-decoration: dashed;
    }
    .line {
      position: absolute;
      width: 780px;
      top: 23px;
      left: 180px;
      height: 1px;
      line-height: 1px;
      background-color: #ccc;
    }
  }
  .item-box {
    height:240px;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 5px;
    img {
      width: 180px;
    }
    .price {
      color: red;
    }
    .name {
      font-size: 14px;
      color: #ccc;
    }
  }
}
</style>